<template>
	<view>
		<view class="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221202/8fc293362dc94458a6c4ef63392f57ae.jpg" mode="widthFix" class="b-cover"></image>
			<view class="b-title">微信小程序设计</view>
		</view>
		<view class="introduce">
			<view class="i-title">什么是小程序</view>
			<text class="i-desc" :user-select="true">小程序是一种不需要下载安装即可使用的应用，它实现了
应用“触手可及”的梦想，用户扫一扫或者搜一下
即可打开应用。也体现了“用完即走”的理念。
小程序能够实现消息通知、线下扫码、公众号关联等七大功能。
其中，通过公众号关联，用户可以实现公众号与小程序之间
相互跳转。小程序是4年内最大的移动互联网商机，
率先上线小程序，抢占流量最大红利，实现营收激增！</text>
			<view class="i-cover">
				<view class="ic-litem">
					<view class="icl-list">
						<view class="icll-box box1">
							<view class="icllb-icon"></view>
							<view class="icllb-text">发现</view>
						</view>
						<view class="icll-box box2">
							<view class="icllb-icon"></view>
							<view class="icllb-text">服务</view>
						</view>
						<view class="icll-box box3">
							<view class="icllb-icon"></view>
							<view class="icllb-text">搜一搜</view>
						</view>
						<view class="icll-box box4">
							<view class="icllb-icon"></view>
							<view class="icllb-text">扫一扫</view>
						</view>
					</view>
					<view class="icl-more">
						<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/2952ed46b7204da9937f688db3ff3b98.png" class="iclm-icon"></image>
						<view class="iclm-text">发现</view>
					</view>
				</view>
				<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/19e18cb846b14b95bc6765dacf94a471.jpg" mode="widthFix" class="ic-rimg"></image>
			</view>
		</view>
		<view class="hr"></view>
		<view class="service">
			<view class="s-title">一站式多平台服务</view>
			<text class="s-desc">多平台管理，专业的技术团队，
安全稳定的系统、完善的服务体系</text>
			<view class="s-list">
				<view class="sl-box">
					<view class="slb-title">
						<view class="slbt-ch">腾讯产品</view>
						<view class="slbt-en">Tencent products</view>
					</view>
					<view class="slb-label">
						<view class="slbl-title">微信小程序</view>
						<view class="slbl-desc">无需下载安装即开即用，超大流量入口共享10亿，微信活跃用户有流量就有顾客</view>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">微信公众号</view>
						<text class="slbl-desc">与微信公众号关联共享\n用户，宣传营销 更便捷</text>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">QQ小程序</view>
						<text class="slbl-desc">年轻用户群体，助力产\n品获取众多年轻用户</text>
					</view>
				</view>
				<view class="sl-box">
					<view class="slb-title">
						<view class="slbt-ch">百度小程序</view>
						<view class="slbt-en">Baidu applet</view>
					</view>
					<view class="slb-label">
						<view class="slbl-title">开放新生态</view>
						<view class="slbl-desc">开源联盟，推动互联网从封闭状态重回 开放，持续为开发者拓展更多的百度内 、外的流量资源。</view>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">智能小程序</view>
						<text class="slbl-desc">通过百度AI开放式赋能，\n精准链接用户</text>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">百度全域流量</view>
						<text class="slbl-desc">亿级百度流量入口，助力\n精准高效获取用户</text>
					</view>
				</view>
				<view class="sl-box">
					<view class="slb-title">
						<view class="slbt-ch">支付宝小程序</view>
						<view class="slbt-en">Alipay applet</view>
					</view>
					<view class="slb-label">
						<view class="slbl-title">开放频道</view>
						<view class="slbl-desc">支付宝首页、会员频道、惠支付 、花呗 频道、信用频道、社区生活扥更多的频 道逐步开放。</view>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">开放流量</view>
						<text class="slbl-desc">一起分享阿里集团亿级\n流量入口</text>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">开放功能</view>
						<text class="slbl-desc">打造拉新 留存促活的运营\n闭环</text>
					</view>
				</view>
				<view class="sl-box">
					<view class="slb-title">
						<view class="slbt-ch">APP应用</view>
						<view class="slbt-en">App application</view>
					</view>
					<view class="slb-label">
						<view class="slbl-title">IOS</view>
						<view class="slbl-desc">为企业商家提供符合业务发展需要的 APP开发解决方案、为需求提供标准化流程服务</view>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">ANDROID</view>
						<text class="slbl-desc">十余年移动互联网开发与\n行业经验沉淀</text>
					</view>
					<view class="slb-label sublabel">
						<view class="slbl-title">WEB APP</view>
						<text class="slbl-desc">一套代码编译生成ios和\nAndroid两套安装包</text>
					</view>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="process">
			<view class="p-title">开发流程</view>
			<view class="p-list">
				<view class="pl-box">
					<view class="plb-icon">
						<view class="plbi-bor icon1">
							<text class="num">01</text>
						</view>
					</view>
					<view class="plb-title">前期沟通</view>
					<text class="plb-desc">专业一对一沟通，\n了解客户需求</text>
					<image src="../../static/images/icon-you2.png" mode="heightFix" class="arrow"></image>
				</view>
				<view class="pl-box">
					<view class="plb-icon">
						<view class="plbi-bor icon2">
							<text class="num">02</text>
						</view>
					</view>
					<view class="plb-title">需求评估</view>
					<text class="plb-desc">针对客户需求\n进行分析评估</text>
					<image src="../../static/images/icon-you2.png" mode="heightFix" class="arrow"></image>
				</view>
				<view class="pl-box">
					<view class="plb-icon">
						<view class="plbi-bor icon3">
							<text class="num">03</text>
						</view>
					</view>
					<view class="plb-title">体验设计</view>
					<text class="plb-desc">提供最佳\n用户体验</text>
					<image src="../../static/images/icon-you2.png" mode="heightFix" class="arrow down"></image>
				</view>
				<view class="pl-box mb0">&nbsp;</view>
				<view class="pl-box mb0">
					<view class="plb-icon">
						<view class="plbi-bor icon5">
							<text class="num">05</text>
						</view>
					</view>
					<view class="plb-title">上线提交</view>
					<text class="plb-desc">提交小程序\n(审核通过即可上线)</text>
					<image src="../../static/images/icon-you2.png" mode="heightFix" class="arrow left"></image>
				</view>
				<view class="pl-box mb0">
					<view class="plb-icon">
						<view class="plbi-bor icon4">
							<text class="num">04</text>
						</view>
					</view>
					<view class="plb-title">功能开发</view>
					<text class="plb-desc">专业团队\n进行功能开发</text>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="advantage">
			<view class="a-title">我们的优势</view>
			<view class="a-list">
				<view class="al-box">
					<view class="alb-cover bg1">
						<view class="albc-text">高性价比</view>
					</view>
					<text class="alb-desc">按需选择\n自由组合，灵活拓展</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg2">
						<view class="albc-text">功能齐全</view>
					</view>
					<text class="alb-desc">常用商城，点餐，\n票务 预约等功能，\n一应俱全</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg3">
						<view class="albc-text">简单易用</view>
					</view>
					<text class="alb-desc">无需代码，\n可视化后台 自由拖拽</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg4">
						<view class="albc-text">省钱省心</view>
					</view>
					<text class="alb-desc">无需开发和美工\n节省高额维护费用</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg5">
						<view class="albc-text">快速上线</view>
					</view>
					<text class="alb-desc">一键生成\n5步快速上线</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg6">
						<view class="albc-text">海量模板</view>
					</view>
					<text class="alb-desc">专业设计，覆盖\n30+行业 每周更新</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg7">
						<view class="albc-text">专业可靠</view>
					</view>
					<text class="alb-desc">深耕互联网\n十余年专业\nWeb App团队打造</text>
				</view>
				<view class="al-box">
					<view class="alb-cover bg8">
						<view class="albc-text">售后无忧</view>
					</view>
					<text class="alb-desc">在线客服\n7*24小时无忧售后</text>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="flow">
			<view class="f-title">小程序流量入口</view>
			<view class="f-list">
				<view class="fl-box">
					<view class="flb-icon icon1"></view>
					<view class="flb-item">
						<view class="flbi-title">二维码</view>
						<view class="flbi-desc">直接扫描二维码进入商家小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon2"></view>
					<view class="flb-item">
						<view class="flbi-title">微信查找</view>
						<view class="flbi-desc">关键字模糊搜索，匹配相关小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon3"></view>
					<view class="flb-item">
						<view class="flbi-title">附近小程序</view>
						<view class="flbi-desc">展示附近5公里内的微信小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon4"></view>
					<view class="flb-item">
						<view class="flbi-title">公众号主页</view>
						<view class="flbi-desc">公众号的资料中显示相关小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon5"></view>
					<view class="flb-item">
						<view class="flbi-title">浏览过的小程序</view>
						<view class="flbi-desc">打开过得小程序都会出现在列表</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon6"></view>
					<view class="flb-item">
						<view class="flbi-title">对话分享</view>
						<view class="flbi-desc">好友微信聊天消息分享小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon7"></view>
					<view class="flb-item">
						<view class="flbi-title">朋友圈</view>
						<view class="flbi-desc">直接分享二维码或店铺活动引流</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon8"></view>
					<view class="flb-item">
						<view class="flbi-title">消息通知</view>
						<view class="flbi-desc">通过消息内容直接跳转到小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon9"></view>
					<view class="flb-item">
						<view class="flbi-title">推送文章</view>
						<view class="flbi-desc">公众号文章中识别小程序二维码进入</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon10"></view>
					<view class="flb-item">
						<view class="flbi-title">置顶小程序</view>
						<view class="flbi-desc">下拉微信首页，显示打开过的小程序</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon11"></view>
					<view class="flb-item">
						<view class="flbi-title">客服咨询</view>
						<view class="flbi-desc">客户通过聊天消息进入</view>
					</view>
				</view>
				<view class="fl-box">
					<view class="flb-icon icon12"></view>
					<view class="flb-item">
						<view class="flbi-title">更多</view>
						<view class="flbi-desc">持续更新中.....</view>
					</view>
				</view>
			</view>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '上海、成都、重庆、北京、深圳、广州微信小程序设计开发-纺扬网站建设',
					description: '微信小程序开发哪家好，首选纺扬网站建设（☏:191-0267-1826），我们是专业的小程序建设，网站开发，seo关键词优化，巨量引擎抖音广告代运营公司，致力于为客户创造商业价值，合作共赢',
					keywords: '上海小程序开发,成都小程序开发,北京小程序开发,深圳小程序开发,广州小程序开发'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");
	
	.introduce {
		padding: 39rpx 24rpx;
		
		.i-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.i-desc {
			display: block;
			text-align: center;
			font-size: 24rpx;
			margin-top: 20rpx;
			line-height: 36rpx;
		}
		
		.i-cover {
			padding: 40rpx 24rpx 0;
			display: flex;
			align-items: center;
			
			.ic-litem {
				margin-right: 37rpx;
				display: flex;
				align-items: center;
				
				.icl-list {
					height: 338rpx;
					margin-right: 30rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
					justify-content: space-between;
					
					.icll-box {
						width: 130rpx;
						height: 160rpx;
						border-radius: 15rpx;
						
						.icllb-icon {
							width: 100%;
							height: 110rpx;
						}
						
						.icllb-text {
							color: #fff;
							font-size: 24rpx;
							text-align: center;
						}
						
						&.box1 {
							background-color: #ff8365;
							
							.icllb-icon {
								background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/3411eb3efff640b898c02e467acc0bee.jpg) center / 58rpx no-repeat;
							}
						}
						
						&.box2 {
							background-color: #3cb2ef;
							
							.icllb-icon {
								background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/4597888a68ad4c549522f1aa39663979.jpg) center / 58rpx no-repeat;
							}
						}
						
						&.box3 {
							background-color: #b165ff;
							
							.icllb-icon {
								background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/8155c42d66524aba99a96f6ecc6127e8.jpg) center / 58rpx no-repeat;
							}
						}
						
						&.box4 {
							background-color: #fdb736;
							
							.icllb-icon {
								background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/bf578c5f5bd34d37ae36b84508574917.jpg) center / 58rpx no-repeat;
							}
						}
					}
				}
				
				.icl-more {
					width: 60rpx;
					
					.iclm-icon {
						width: 60rpx;
						height: 60rpx;
					}
					
					.iclm-text {
						font-size: 28rpx;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
			
			.ic-rimg {
				width: 410rpx;
			}
		}
	}

	.service {
		padding-top: 40rpx;
		
		.s-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.s-desc {
			display: block;
			margin-top: 20rpx;
			font-size: 24rpx;
			text-align: center;
		}
		
		.s-list {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			padding: 40rpx 24rpx 0 0;
			
			.sl-box {
				height: 670rpx;
				flex: 338rpx 0;
				border-radius: 12rpx;
				overflow: hidden;
				margin: 0 0 24rpx 24rpx;
				background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/602fae63057446e7b9a1de0ed496d297.jpg) center / cover no-repeat;
				
				.slb-title {
					height: 154rpx;
					overflow: hidden;
			
					.slbt-ch {
						margin-top: 39rpx;
						color: #fff;
						font-size: 36rpx;
						font-weight: bold;
						padding: 0 20rpx;
					}
					
					.slbt-en {
						padding: 0 20rpx 2rpx;
						position: relative;
						color: #fff;
						font-size: 18rpx;
						
						&::after {
							content: '';
							width: 20rpx;
							height: 1rpx;
							background-color: #fff;
							position: absolute;
							bottom: 0;
							left: 20rpx;
						}
					}
				}
				
				.slb-label {
					height: 186rpx;
					padding: 0 20rpx;
					overflow: hidden;
					
					.slbl-title {
						margin-top: 10rpx;
						font-size: 30rpx;
						color: #fff;
						position: relative;
						
						&::before {
							content: '';
							width: 5rpx;
							height: 5rpx;
							border-radius: 50%;
							border: 3rpx solid #00EAFF;
							position: absolute;
							top: 50%;
							right: calc(100% + 2rpx);
							transform: translateY(-50%);
						}
					}
					
					.slbl-desc {
						color: #fff;
						margin-top: 5rpx;
						font-size: 24rpx;
						display: block;
						overflow: hidden;
					}
					
					&.sublabel {
						height: 158rpx;
						
						.slbl-title {
							margin-top: 19rpx;
						}
						
						.slbl-desc {
							margin-top: 19rpx;
						}
					}
				}
			}
		}
	}

	.process {
		padding: 40rpx 0;
		
		.p-title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		
		.p-list {
			padding: 39rpx 24rpx 0;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			
			.pl-box {
				flex: calc(100% / 3) 0;
				margin-bottom: 90rpx;
				position: relative;
				
				.plb-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					
					.plbi-bor {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						border: 3rpx solid @color-yellow2;
						position: relative;
						
						.num {
							width: 30rpx;
							height: 30rpx;
							line-height: 30rpx;
							text-align: center;
							border-radius: 50%;
							background-color: @color-yellow2;
							color: #fff;
							font-size: 16rpx;
							overflow: hidden;
							position: absolute;
							top: 0;
							left: 0;
						}
					
						&.icon1 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/6d171cd39f55476ab2359388f3c1e719.jpg) center / 42rpx no-repeat;
						}
					
						&.icon2 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/9dc64e1f65e641ae88c7d35eacb82ed0.jpg) center / 42rpx no-repeat;
						}
					
						&.icon3 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/09880947031b483b8702921766ab83db.jpg) center / 42rpx no-repeat;
						}
					
						&.icon4 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/42115f719116427bbc4b14a6e42cbe87.jpg) center / 42rpx no-repeat;
						}
					
						&.icon5 {
							background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/d91f6e8ed7b34868afd42b8b23bc26f7.jpg) center / 42rpx no-repeat;
						}
					}
				}
				
				.plb-title {
					font-size: 30rpx;
					text-align: center;
					margin-top: 20rpx;
				}
				
				.plb-desc {
					display: block;
					margin-top: 9rpx;
					text-align: center;
					font-size: 24rpx;
				}
				
				.arrow {
					height: 16rpx;
					position: absolute;
					top: 45rpx;
					left: 100%;
					transform: translate(-50%, -50%);
					
					&.down {
						top: unset;
						bottom: -50rpx;
						left: 50%;
						transform: translateX(-50%) rotate(90deg);
					}
					
					&.left {
						transform: translate(-50%, -50%) rotateY(180deg);
					}
				}
			
				&.mb0 {
					margin-bottom: 0;
				}
			}
		}
	}

	.advantage {
		padding-top: 40rpx;
		
		.a-title {
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
		}
		
		.a-list {
			padding: 52rpx 24rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			
			.al-box {
				width: 218rpx;
				margin: 0 0 40rpx 24rpx;
			
				.alb-cover {
					width: 100%;
					height: 148rpx;
					border-radius: 12rpx;
					overflow: hidden;
					position: relative;
					
					.albc-text {
						position: absolute;
						top: 89rpx;
						right: 0;
						left: 0;
						overflow: hidden;
						white-space: nowrap;
						color: #fff;
						font-size: 30rpx;
						text-align: center;
					}
					
					&.bg1 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/c13f8e22897c4317a5732ba3f4153784.jpg) center / cover no-repeat;
					}
					
					&.bg2 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/591d092be6244c078bba32c393ba054f.jpg) center / cover no-repeat;
					}
					
					&.bg3 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/53a3e810da674c5385c257f8dacfc483.jpg) center / cover no-repeat;
					}
					
					&.bg4 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/846bdfc4b7a149209d81f207a3e9735e.jpg) center / cover no-repeat;
					}
					
					&.bg5 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/e6c075eb7e2946a8a1d6c46af5deb3d6.jpg) center / cover no-repeat;
					}
					
					&.bg6 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/6fc17039482441d2b813926f2aca4511.jpg) center / cover no-repeat;
					}
					
					&.bg7 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/79c5ef9afd18407aba53b005c2fadde8.jpg) center / cover no-repeat;
					}
					
					&.bg8 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/f2869ed8ba1e4480b3fb52760b748fee.jpg) center / cover no-repeat;
					}
				}
				
				.alb-desc {
					margin-top: 10rpx;
					text-align: center;
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}

	.flow {
		padding-top: 40rpx;
		
		.f-title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		
		.f-list {
			padding: 95rpx 24rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			
			.fl-box {
				flex: 50% 0;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				
				.flb-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					
					&.icon1 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/ccc1a739adb648dab641ba44b9cfa478.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(7 186 254 / 30%);
					}
					
					&.icon2 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/3aa286e15a084ceabd38898d6394baa8.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(6 220 197 / 30%);
					}
					
					&.icon3 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/7e17caa6d0ee457da5dc1f4bfb0e591b.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(254 192 72 / 30%);
					}
					
					&.icon4 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/3491b43f7f1f42c9901974fea65254f9.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(254 127 76 / 30%);
					}
					
					&.icon5 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/fc021b7116ba470bae1df39f87c10a64.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(160 127 254 / 30%);
					}
					
					&.icon6 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/de3f70c839c94637a0ad6aae3a101d91.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(252 94 94 / 30%);
					}
					
					&.icon7 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/f0c9e36c91d54265a4398cedb1098dfa.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(3 183 250 / 30%);
					}
					
					&.icon8 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/a946933b2a0e4124b92c82e6e60a1195.png) center / 60rpx no-repeat;
						box-shadow: 3px 4px 8px 0px rgb(245 89 129 / 30%);
					}
					
					&.icon9 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/b4e512337fdb4bdf8f81c8bd8c65f07a.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(100 185 241 / 30%);
					}
					
					&.icon10 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/4a113fa669bd445da4ff0937089941a8.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(7 211 152 / 30%);
					}
					
					&.icon11 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/76b9e75072bf409cb3617b1e4972d0dc.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(159 88 245 / 30%);
					}
					
					&.icon12 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/080f00595c1746929722038c3b9ac373.png) center / 60rpx no-repeat;
						box-shadow: 0px 5px 8px 0px rgb(15 185 91 / 30%);
					}
				}
				
				.flb-item {
					flex: 1;
					overflow: hidden;
					
					.flbi-title {
						font-size: 18rpx;
					}
					
					.flbi-desc {
						font-size: 14rpx;
						margin-top: 8rpx;
						color: #666;
					}
				}
			}
		}
	}
</style>
